<template>
    <div class="my-dialog">
      <div class="header">
        <!-- 1. 给 slot 起名字 -->
        <slot name="header"></slot>
      </div>
      <div class="content">
        <!-- 1. 在子组件中使用 slot 占位 -->
        <!-- 在 slot 标签中写的内容就是插槽的默认值 -->
        <!-- 
          作用: 当外部传入了标签进来, 就使用外部的标签, 如果没传标签, 就渲染默认内容
         -->
        <slot name="content">这是默认的内容</slot>
      </div>
      <div class="footer">
        <!-- <button>关闭</button> -->
        <slot name="footer" :yes="yes" :no="no"></slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data(){
        return {
            yes:'确定',
            no: '不确定'
        }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .my-dialog {
    width: 400px;
    padding: 10px 20px;
    border: 3px solid #000;
    border-radius: 5px;
    margin: 10px;
  }
  </style>